<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="支付宝" name="first">
        <el-form :model="alipayDataForm" :rules="alipayDataRule" ref="alipayDataForm" label-width="120px">
          <el-form-item label="商户ID" prop="mchId">
            <el-input v-model="alipayDataForm.mchId" placeholder="商户ID"></el-input>
          </el-form-item>
          <el-form-item label="支付宝appid" prop="appId">
            <el-input v-model="alipayDataForm.appId" placeholder="支付宝appid"></el-input>
          </el-form-item>
          <el-form-item label="类型" size="mini" prop="keyType">
            <el-radio-group v-model="alipayDataForm.keyType" @change="keysTypdHander">
              <el-radio :label="0">公钥证书</el-radio>
              <el-radio :label="1">公钥</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="应用私钥" size="mini" prop="privateKey">
            <el-input v-model="alipayDataForm.privateKey" placeholder="应用私钥"></el-input>
          </el-form-item>
          <el-form-item label="支付宝公钥" size="mini" prop="publicKey">
            <el-input v-model="alipayDataForm.publicKey" placeholder="支付宝公钥"></el-input>
          </el-form-item>
        <el-form-item label="应用私钥证书" v-if="!keyVisable" prop="privateKeyPath">
          <el-row>
            <el-col :span="18">
              <el-input v-model="alipayDataForm.privateKeyPath" v-bind:readonly="true" placeholder="应用私钥证书"></el-input>
            </el-col>
            <el-col :span="6">
              <el-upload
                class="upload-demo"
                :action="url"
                :before-upload="beforePrivateKeyUploadHandle"
                :on-success="successPrivateKeyHandle"
                :multiple="false"
                :limit="1"
                :headers="myHeaders"
                :file-list="privateKeyList"
                :on-remove="onPrivateKeyRemove"
                style="text-align: center;">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-col>
          </el-row>
         </el-form-item>
         <el-form-item label="应用公钥证书" v-if="!keyVisable" prop="publicKeyPath">
           <el-row>
             <el-col :span="18">
               <el-input v-model="alipayDataForm.publicKeyPath" v-bind:readonly="true" placeholder="应用公钥证书"></el-input>
             </el-col>
             <el-col :span="6">
               <el-upload
                 class="upload-demo"
                 :action="url"
                 :before-upload="beforePublicKeyUploadHandle"
                 :on-success="successPublicKeyHandle"
                 :multiple="false"
                 :limit="1"
                 :headers="myHeaders"
                 :file-list="publicKeyList"
                 :on-remove="onPublicKeyRemove"
                 style="text-align: center;">
                 <el-button size="small" type="primary">点击上传</el-button>
               </el-upload>
             </el-col>
           </el-row>
          </el-form-item>
          <el-form-item label="支付宝公钥证书" v-if="!keyVisable" prop="appCertPath">
            <el-row>
              <el-col :span="18">
                <el-input v-model="alipayDataForm.appCertPath" v-bind:readonly="true" placeholder="支付宝公钥证书"></el-input>
              </el-col>
              <el-col :span="6">
                <el-upload
                  class="upload-demo"
                  :action="url"
                  :before-upload="beforeAppCertUploadHandle"
                  :on-success="successAppCertHandle"
                  :multiple="false"
                  :limit="1"
                  :headers="myHeaders"
                  :file-list="appCertList"
                  :on-remove="onAppCertRemove"
                  style="text-align: center;">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
            </el-row>
           </el-form-item>
           <el-form-item label="支付宝根证书" v-if="!keyVisable" prop="aliPayCertPath">
             <el-row>
               <el-col :span="18">
                 <el-input v-model="alipayDataForm.aliPayCertPath" v-bind:readonly="true" placeholder="支付宝根证书"></el-input>
               </el-col>
               <el-col :span="6">
                 <el-upload
                   class="upload-demo"
                   :action="url"
                   :before-upload="beforeAliPayCertUploadHandle"
                   :on-success="successAliPayCertHandle"
                   :multiple="false"
                   :limit="1"
                   :headers="myHeaders"
                   :file-list="aliPayCertList"
                   :on-remove="onAliPayCertRemove"
                   style="text-align: center;">
                   <el-button size="small" type="primary">点击上传</el-button>
                 </el-upload>
               </el-col>
             </el-row>
            </el-form-item>
          <el-form-item label="状态" size="mini" prop="state">
            <el-radio-group v-model="alipayDataForm.state">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button type="primary" :disabled="submitVisible" @click="alipayDataFormSubmit()">提交</el-button>
        </span>
      </el-tab-pane>
      <el-tab-pane label="微信支付" name="second">
        <el-form :model="wxpayDataForm" :rules="wxpayDataRule" ref="wxpayDataForm" label-width="120px">
          <el-form-item label="商户ID" prop="mchId">
            <el-input v-model="wxpayDataForm.mchId" placeholder="商户ID"></el-input>
          </el-form-item>
          <el-form-item label="微信appid" prop="appId">
            <el-input v-model="wxpayDataForm.appId" placeholder="微信appid"></el-input>
          </el-form-item>
          <el-form-item label="key" prop="partnerKey">
            <el-input v-model="wxpayDataForm.partnerKey" placeholder="key"></el-input>
          </el-form-item>
          <el-form-item label="微信证书" v-if="!keyVisable" prop="certPath">
            <el-row>
              <el-col :span="18">
                <el-input v-model="wxpayDataForm.certPath" v-bind:readonly="true" placeholder="微信证书"></el-input>
              </el-col>
              <el-col :span="6">
                <el-upload
                  class="upload-demo"
                  :action="url"
                  :before-upload="beforeWxPayCertUploadHandle"
                  :on-success="successWxPayCertHandle"
                  :multiple="false"
                  :limit="1"
                  :headers="myHeaders"
                  :file-list="wxPayCertList"
                  :on-remove="onWxPayCertRemove"
                  style="text-align: center;">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="状态" size="mini" prop="state">
            <el-radio-group v-model="wxpayDataForm.state">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button type="primary" :disabled="wxSubmitVisible" @click="wxpayDataFormSubmit()">提交</el-button>
        </span>
      </el-tab-pane>
      <el-tab-pane label="APP微信支付" name="third">APP微信支付</el-tab-pane>
      <el-tab-pane label="商家微信支付" name="fourth">商家微信支付</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        submitVisible: false,
        keyVisable: true,
        wxSubmitVisible: false,
        activeName: 'first',
        url: '',
        privateKeyList: [],
        publicKeyList: [],
        appCertList: [],
        aliPayCertList: [],
        myHeaders: {
          token: this.$cookie.get('token')
        },
        alipayDataRule: [],
        alipayRule: {
          mchId: [
            { required: true, message: '商户ID不能为空', trigger: 'blur' }
          ],
          appId: [
            { required: true, message: '支付宝appid不能为空', trigger: 'blur' }
          ],
          privateKey: [
            { required: true, message: '应用私钥不能为空', trigger: 'blur' }
          ],
          publicKey: [
            { required: true, message: '支付宝公钥不能为空', trigger: 'blur' }
          ]
        },
        alipayCartRule: {
          mchId: [
            { required: true, message: '商户ID不能为空', trigger: 'blur' }
          ],
          appId: [
            { required: true, message: '支付宝appid不能为空', trigger: 'blur' }
          ],
          privateKey: [
            { required: true, message: '应用私钥不能为空', trigger: 'blur' }
          ],
          publicKey: [
            { required: true, message: '支付宝公钥不能为空', trigger: 'blur' }
          ],
          privateKeyPath: [
            { required: true, message: '应用私钥证书不能为空', trigger: 'blur' }
          ],
          publicKeyPath: [
            { required: true, message: '支付宝公钥证书不能为空', trigger: 'blur' }
          ],
          appCertPath: [
            { required: true, message: '应用公钥证书不能为空', trigger: 'blur' }
          ],
          aliPayCertPath: [
            { required: true, message: '支付宝根证书不能为空', trigger: 'blur' }
          ]
        },
        wxpayDataRule: {
          mchId: [
            { required: true, message: '商户ID不能为空', trigger: 'blur' }
          ],
          appId: [
            { required: true, message: '微信appid不能为空', trigger: 'blur' }
          ],
          partnerKey: [
            { required: true, message: 'key不能为空', trigger: 'blur' }
          ],
          certPath: [
            { required: true, message: '证书不能为空', trigger: 'blur' }
          ]
        },
        alipayDataForm: {
          alipayId: '',
          mchId: '',
          appId: '',
          keyType: 0,
          privateKey: '',
          privateKeyPath: '',
          publicKey: '',
          publicKeyPath: '',
          appCertPath: '',
          aliPayCertPath: '',
          state: 1
        },
        wxPayCertList: [],
        wxpayDataForm: {
          wxpayId: '',
          mchId: '',
          appId: '',
          partnerKey: '',
          certPath: '',
          state: 1
        }
      }
    },
    activated () {
      this.initApipay()
      this.initWxpay()
    },
    methods: {
      // 微信证书
      beforeWxPayCertUploadHandle (file) {
        console.log(file)
      },
      successWxPayCertHandle (response, file, fileList) {
        this.wxPayCertList = fileList
        if (response && response.code === 0) {
          this.wxpayDataForm.certPath = response.url
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
          })
        } else {
          this.$message.error(response.msg)
        }
      },
      onWxPayCertRemove (file, fileList) {
        for (var i = 0; i < this.wxPayCertList.length; i++) {
          if (file.name === this.wxPayCertList[i].fileName) {
            this.wxPayCertList.splice(i, 1)
          }
        }
      },
      initWxpay () {
        this.wxSubmitVisible = false
        this.wxPayCertList = []
        this.$http({
          url: this.$http.adornUrl('/pig-pay/mch/wx/info'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            if (data.wxpay === null) {
              this.wxpayDataForm.wxpayId = ''
              this.wxpayDataForm.mchId = ''
              this.wxpayDataForm.appId = ''
              this.wxpayDataForm.partnerKey = ''
              this.wxpayDataForm.certPath = ''
              this.wxpayDataForm.state = 1
            } else {
              this.wxpayDataForm.wxpayId = data.wxpay.wxpayId
              this.wxpayDataForm.mchId = data.wxpay.mchId
              this.wxpayDataForm.appId = data.wxpay.appId
              this.wxpayDataForm.partnerKey = data.wxpay.partnerKey
              this.wxpayDataForm.certPath = data.wxpay.certPath
              this.wxpayDataForm.state = data.wxpay.state
            }
          }
          this.dataListLoading = false
        })
      },
      wxpayDataFormSubmit () {
        this.$refs['wxpayDataForm'].validate((valid) => {
          if (valid) {
            this.wxSubmitVisible = true
            this.$http({
              url: this.$http.adornUrl(`/pig-pay/mch/wx/${!this.wxpayDataForm.wxpayId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'wxpayId': this.wxpayDataForm.wxpayId,
                'mchId': this.wxpayDataForm.mchId,
                'appId': this.wxpayDataForm.appId,
                'partnerKey': this.wxpayDataForm.partnerKey,
                'certPath': this.wxpayDataForm.certPath,
                'state': this.wxpayDataForm.state
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.wxSubmitVisible = false
                    this.init()
                  }
                })
              } else {
                this.$message.error(data.msg)
                this.wxSubmitVisible = false
              }
            })
          }
        })
      },
      alipayDataFormSubmit () {
        this.$refs['alipayDataForm'].validate((valid) => {
          if (valid) {
            this.submitVisible = true
            this.$http({
              url: this.$http.adornUrl(`/pig-pay/sys/mch/${!this.alipayDataForm.alipayId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'alipayId': this.alipayDataForm.alipayId,
                'mchId': this.alipayDataForm.mchId,
                'appId': this.alipayDataForm.appId,
                'keyType': this.alipayDataForm.keyType,
                'privateKey': this.alipayDataForm.privateKey,
                'privateKeyPath': this.alipayDataForm.privateKeyPath,
                'publicKey': this.alipayDataForm.publicKey,
                'publicKeyPath': this.alipayDataForm.publicKeyPath,
                'appCertPath': this.alipayDataForm.appCertPath,
                'aliPayCertPath': this.alipayDataForm.aliPayCertPath,
                'state': this.alipayDataForm.state
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.submitVisible = false
                    this.init()
                  }
                })
              } else {
                this.$message.error(data.msg)
                this.submitVisible = false
              }
            })
          }
        })
      },
      // 应用私钥证书
      beforePrivateKeyUploadHandle (file) {
        console.log(file)
      },
      successPrivateKeyHandle (response, file, fileList) {
        this.privateKeyList = fileList
        if (response && response.code === 0) {
          this.alipayDataForm.privateKeyPath = response.url
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
          })
        } else {
          this.$message.error(response.msg)
        }
      },
      onPrivateKeyRemove (file, fileList) {
        for (var i = 0; i < this.privateKeyList.length; i++) {
          if (file.name === this.privateKeyList[i].fileName) {
            this.privateKeyList.splice(i, 1)
          }
        }
      },
      // 支付宝公钥证书
      beforePublicKeyUploadHandle (file) {
        console.log(file)
      },
      successPublicKeyHandle (response, file, fileList) {
        this.publicKeyList = fileList
        if (response && response.code === 0) {
          this.alipayDataForm.publicKeyPath = response.url
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
          })
        } else {
          this.$message.error(response.msg)
        }
      },
      onPublicKeyRemove (file, fileList) {
        for (var i = 0; i < this.publicKeyList.length; i++) {
          if (file.name === this.publicKeyList[i].fileName) {
            this.publicKeyList.splice(i, 1)
          }
        }
      },
      // 应用公钥证书
      beforeAppCertUploadHandle (file) {
        console.log(file)
      },
      successAppCertHandle (response, file, fileList) {
        this.appCertList = fileList
        if (response && response.code === 0) {
          this.alipayDataForm.appCertPath = response.url
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
            this.busvisible = false
          })
        } else {
          this.$message.error(response.msg)
        }
      },
      onAppCertRemove (file, fileList) {
        for (var i = 0; i < this.appCertList.length; i++) {
          if (file.name === this.appCertList[i].fileName) {
            this.appCertList.splice(i, 1)
          }
        }
      },
      // 支付宝根证书
      beforeAliPayCertUploadHandle (file) {
        console.log(file)
      },
      successAliPayCertHandle (response, file, fileList) {
        this.aliPayCertList = fileList
        if (response && response.code === 0) {
          this.alipayDataForm.aliPayCertPath = response.url
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
          })
        } else {
          this.$message.error(response.msg)
        }
      },
      onAliPayCertRemove (file, fileList) {
        for (var i = 0; i < this.aliPayCertList.length; i++) {
          if (file.name === this.aliPayCertList[i].fileName) {
            this.aliPayCertList.splice(i, 1)
          }
        }
      },
      initApipay () {
        this.keyVisable = false
        this.alipayDataRule = this.alipayCartRule
        this.url = this.$http.adornUrl(`/pig-pay/sys/mch/upload`)
        this.privateKeyList = []
        this.publicKeyList = []
        this.appCertList = []
        this.aliPayCertList = []
        this.$http({
          url: this.$http.adornUrl('/pig-pay/sys/mch/info'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            if (data.alipay === null) {
              this.alipayDataForm.alipayId = ''
              this.alipayDataForm.mchId = ''
              this.alipayDataForm.appId = ''
              this.alipayDataForm.keyType = 0
              this.keyTypdHander(this.alipayDataForm.keyType)
              this.alipayDataForm.privateKey = ''
              this.alipayDataForm.privateKeyPath = ''
              this.alipayDataForm.publicKey = ''
              this.alipayDataForm.publicKeyPath = ''
              this.alipayDataForm.appCertPath = ''
              this.alipayDataForm.aliPayCertPath = ''
              this.alipayDataForm.state = 1
            } else {
              this.alipayDataForm.alipayId = data.alipay.alipayId
              this.alipayDataForm.mchId = data.alipay.mchId
              this.alipayDataForm.appId = data.alipay.appId
              this.alipayDataForm.keyType = data.alipay.keyType
              this.alipayDataForm.privateKey = data.alipay.privateKey
              this.alipayDataForm.privateKeyPath = data.alipay.privateKeyPath
              this.alipayDataForm.publicKey = data.alipay.publicKey
              this.alipayDataForm.publicKeyPath = data.alipay.publicKeyPath
              this.alipayDataForm.appCertPath = data.alipay.appCertPath
              this.alipayDataForm.aliPayCertPath = data.alipay.aliPayCertPath
              this.alipayDataForm.state = data.alipay.state
              this.keyTypdHander(this.alipayDataForm.keyType)
            }
          }
          this.dataListLoading = false
        })
      },
      certChange () {
        this.privateKeyList = []
        this.publicKeyList = []
        this.appCertList = []
        this.aliPayCertList = []
        this.alipayDataForm.privateKeyPath = ''
        this.alipayDataForm.publicKeyPath = ''
        this.alipayDataForm.appCertPath = ''
        this.alipayDataForm.aliPayCertPath = ''
      },
      keyTypdHander (val) {
        if (val === 1) {
          this.keyVisable = true
          this.alipayDataRule = this.alipayDataRule
          if (this.alipayDataForm.alipayId === '') {
            this.certChange()
          }
        } else {
          this.keyVisable = false
          this.alipayDataRule = this.alipayCartRule
        }
      },
      keysTypdHander (val) {
        if (val === 1) {
          this.keyVisable = true
          this.alipayDataRule = this.alipayDataRule
          this.certChange()
        } else {
          this.keyVisable = false
          this.alipayDataRule = this.alipayCartRule
        }
      },
      handleClick (tab, event) {
        if (tab.name === 'first') {
          this.initApipay()
        }
      }
    }
  }
</script>

<style>
</style>
